<template>
  <div>
    <task-board-audit @getAuditTable="getAuditTable" />
    <el-divider>
      <el-button type="text">
        <div class="role">
          <i style="font-size: 35px" class="el-icon-s-custom" />
        </div>
      </el-button>
    </el-divider>
    <el-table
      :data="allTaskData.data"
      :header-cell-style="{'text-align':'center'}"
      :cell-style="{'text-align':'center'}"
      style="width: 100%"
    >
      <el-table-column
        label="任务名称"
        width="400"
      >
        <template slot-scope="scope">
          <div class="master-header" style="padding: 10px">
            <el-tag style="margin: 5px; font-size: large">{{ scope.row.tasktitle }}</el-tag>
            <el-tag class="button" effect="plain">{{ scope.row.type_name }}</el-tag>
            <i class="el-icon-coin" style="color: #ffba00; font-size: large">{{ scope.row.bounty }}</i>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="任务描述"
        width="200"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.taskintro }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="发布-截止日期"
        width="260"
      >
        <template slot-scope="scope">
          <i class="el-icon-timer" /><time class="time">{{ scope.row.startdate }}</time>——<i class="el-icon-timer" /><time class="time">{{ scope.row.enddate }}</time>
        </template>
      </el-table-column>
      <el-table-column
        label="发布者"
        width="260"
      >
        <template slot-scope="scope">
          <div style="display: flex;flex-direction: column">
            <div class="audit-user-header">
              <el-avatar size="small" :src="circleUrl" @error="errorHandler"><img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"></el-avatar>
              <span style="margin-left: 5px">{{ scope.row.nickname }}</span>
            </div>
            <span :style="{color: scope.row.email == '未领取'?'#de8a18':'#3c763d'}">{{ scope.row.email }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="任务审核状态"
        width="120"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.audit == 0?'primary': scope.row.audit == 1 ? 'success':'danger'">
            {{ scope.row.audit==0?'未审核':scope.row.audit==1?'已通过':'不通过' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="通过/不通过">
        <template slot-scope="scope">
          <el-button-group>
            <el-button type="primary" icon="el-icon-circle-check" :disabled="currentPanel!=0" @click="approveTask(scope.row.key)" />
            <el-button type="danger" icon="el-icon-circle-close" :disabled="currentPanel!=0" @click="disapproveTask(scope.row.key)" />
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import TaskBoard from '@/views/tasks/component/TaskBoard'
import taskApi from '@/api/tasks'
import adminApi from '@/api/admin'
import TaskBoardMaster from '@/views/tasks/component/TaskBoardMaster'
import { mapGetters } from 'vuex'
import TaskBoardAudit from '@/views/tasks/component/TaskBoardAudit'
export default {
  name: 'MyTask',
  components: { TaskBoardAudit, TaskBoardMaster, TaskBoard },
  data() {
    return {
      allTaskData: {},
      // 0：未审核；1：审核通过；2：审核不通过
      currentPanel: 0
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  },
  mounted() {
    this.getAuditTable(0)
  },
  // 获取任务审核面板 {0：未审核；1：审核通过；2：审核不通过}
  methods: {
    getAuditTable(table_type) {
      this.currentPanel = table_type
      const queryVo = {
        'isLogin': true,
        'form_num': table_type
      }
      adminApi.getAllAuditTask(queryVo)
        .then(response => {
          this.allTaskData = response
        })
    },
    approveTask(task_id) {
      const queryVo = {
        'id': task_id,
        'audit': '1'
      }
      adminApi.changeAuditStatus(queryVo)
        .then(response => {
          if (response == 'success') {
            this.getAuditTable(0)
            this.$message({
              message: '审核通过！',
              type: 'success'
            })
          } else {
            this.$message({
              message: '操作失败，请联系系统管理员',
              type: 'warning'
            })
          }
        })
    },
    disapproveTask(task_id) {
      const queryVo = {
        'id': task_id,
        'audit': '2'
      }
      adminApi.changeAuditStatus(queryVo)
        .then(response => {
          if (response == 'success') {
            this.getAuditTable(0)
            this.$message({
              message: '审核不通过！',
              type: 'success'
            })
          } else {
            this.$message({
              message: '操作失败，请联系系统管理员',
              type: 'warning'
            })
          }
        })
    }

  }
}
</script>

<style scoped>
.master-header{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.time {
  margin-left: 5px;
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  margin: 5px;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
.role {
  display: flex;
  flex-direction: column;
  margin: 5px;
  justify-content: center;
  align-items: center;
}

.float_btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
}

.audit-user-header{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

</style>
